<template>
  <layout :appHeader="{ title: $route.name }">
    <view class="container">
      <view class="item">
        <view class="item__left">產品1</view>
        <picker
          class="item__right"
          :range="productList"
          range-key="productName"
          @change="product1Change"
        >
          <view class="picker-wrapper">
            <text class="item__text" v-if="product_1">{{
              product_1.productName
            }}</text>
            <text class="item__text_holder" v-show="!product_1"
              >请选择產品</text
            >
            <image
              class="more-icon"
              src="https://insurance-image.oss-cn-beijing.aliyuncs.com/icon_more_black%402x.png"
              mode="scaleToFill"
            />
          </view>
        </picker>
      </view>
      <view class="item">
        <view class="item__left">產品2</view>
        <picker
          class="item__right"
          :range="productList"
          range-key="productName"
          @change="product2Change"
        >
          <view class="picker-wrapper">
            <text class="item__text" v-if="product_2">{{
              product_2.productName
            }}</text>
            <text class="item__text_holder" v-show="!product_2"
              >请选择產品</text
            >
            <image
              class="more-icon"
              src="https://insurance-image.oss-cn-beijing.aliyuncs.com/icon_more_black%402x.png"
              mode="scaleToFill"
            />
          </view>
        </picker>
      </view>
      <view class="item">
        <view class="item__left">產品3</view>
        <picker
          class="item__right"
          :range="productList"
          range-key="productName"
          @change="product3Change"
        >
          <view class="picker-wrapper">
            <text class="item__text" v-if="product_3">{{
              product_3.productName
            }}</text>
            <text class="item__text_holder" v-show="!product_3"
              >请选择產品</text
            >
            <image
              class="more-icon"
              src="https://insurance-image.oss-cn-beijing.aliyuncs.com/icon_more_black%402x.png"
              mode="scaleToFill"
            />
          </view>
        </picker>
      </view>
    </view>
    <view class="tip">请选择最少2个产品进行比较</view>
    <view class="submit-btn" @click="gotoAnalysisPage">
      <!-- <span class="edit-icon"></span> -->
      <span>产品比较</span>
    </view>
  </layout>
</template>
<script>
  import Index from './index';

  export default Index;
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
  @import 'index';
  // .title {
  //   color: var(--base-color);
  //   border-bottom: 1rpx solid var(--simple-color);
  //   padding: 40rpx;
  //   margin-bottom: 20rpx;
  //   margin-left: 20rpx;
  //   margin-right: 20rpx;
  // }
  // .u-card-wrap {
  //   background-color: $u-bg-color;
  //   padding: 1px;
  // }

  // .u-body-item {
  //   font-size: 32rpx;
  //   color: #333;
  //   padding: 20rpx 10rpx;
  // }

  // .u-body-item image {
  //   width: 120rpx;
  //   flex: 0 0 120rpx;
  //   height: 120rpx;
  //   border-radius: 8rpx;
  //   margin-left: 12rpx;
  // }
</style>
